<template>
  <div class="page_box">
    <div class="page_item">
      <iframe
        ref="myIframe"
        id="iframe"
        src="http://localhost:8080/#/package/pagestyle?title=element%20%E6%A0%B7%E5%BC%8F"
        frameborder="0"
        :style="{
          width: '1920px',
        //   height: '1080px',
          height: `calc( 400px / ${scale})`,
          transform: `scale(${scale})`,
        }"
      ></iframe>
    </div>
    <div class="page_item"></div>
    <div class="page_item"></div>
    <div class="page_item"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
    };
  },
  mounted() {
    this.$nextTick(() => {
      const iframeWin = document.getElementById("iframe");
      if (iframeWin.attachEvent) {
        iframeWin.attachEvent("onload", () => {
          console.log("iframe加载完成");
          this.getIframeHeight();
        });
      } else {
        iframeWin.onload = () => {
          console.log("iframe加载完成");
          this.getIframeHeight();
        };
      }
    });
  },
  methods: {
    getIframeHeight() {
      console.log("myIframe", this.$refs.myIframe);
      console.log("myIframe winodw", this.$refs.myIframe.contentWindow);
      console.log(
        "myIframe winodw app",
        this.$refs.myIframe.contentWindow.document.getElementById("app")
      );
      console.log(
        "myIframe winodw page_box",
        this.$refs.myIframe.contentWindow.document.getElementsByClassName(
          "page_box"
        )
      );
      const iframeAppDom =
        this.$refs?.myIframe?.contentWindow?.document?.getElementById("app");
      if (iframeAppDom) {
        iframeAppDom.style.width = `1920px`;
        iframeAppDom.style.height = `1080px`;
        // 获取iframe 的宽高
        const iframeWidth = iframeAppDom.clientWidth;
        const iframeHeight = iframeAppDom.clientHeight;
        console.log("iframeWidth", iframeWidth);
        console.log("iframeHeight", iframeHeight);

        console.log("iframe 子节点", iframeAppDom.children);

        // 获取父节点宽高
        const parentDom = document.getElementsByClassName("page_item")[0];
        const parentWidth = parentDom.clientWidth;
        const parentHeight = parentDom.clientHeight;
        console.log("父盒子宽度", parentWidth);
        console.log("父盒子高度", parentHeight);

        const widthScale = parentWidth / iframeWidth;
        const heightScale = parentHeight / iframeHeight;

        // const widthScale =   iframeWidth/parentWidth;
        // const heightScale =  iframeHeight/parentHeight;
        console.log("宽度适配比例:", widthScale);
        console.log("高度适配比例:", heightScale);
        // 得到最小适配比例
        const scale = widthScale > heightScale ? heightScale : widthScale;
        console.log("最小适配比例 ", scale);
        this.scale = scale;

        // iframeAppDom.style.transform =`scale(${scale})`;
        // iframeAppDom.style.transformOrigin =`0`;

        // this.$refs.page_item.style.setProperty("--scale", scale);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page_box {
  width: 100%;
  height: 800px;
  border: 1px solid #000;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  .page_item {
    width: 400px;
    height: 400px;
    border: 1px solid #000;

    #iframe{
        transform-origin: 0 0;
     
    }
  }
}
</style>
